﻿<div class="row-fluid page-content">
    <div id="page-inner">
        <div class="row">
            <div class="col-md-12">
                <div class="page-head-line location">
                    <span>位置：</span>
                    <ul>
                        <li><a href="/">首页</a></li>
                        <li>信息维护</li>
                        <li>服务项目</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div id="toolbar">
                    <div class="form-inline" role="form">
                        <div class="form-group col-md-3">
                            <div class="input-group">
                                <span class="input-group-addon">服务项目: </span>
                                <input name="Name" type="text" class="form-control query-name" />
                            </div>
                        </div>
                        <div class="form-group col-md-3">
                            <div class="input-group">
                                <span class="input-group-addon">服务类别: </span>
                                <select class="form-control valid query-type" name="Type" aria-required="true" aria-invalid="false"></select>
                            </div>
                        </div>
                        <div class="form-group col-md-6">
                            <div class="input-group">
                                <button class="query btn btn-primary"><i class="fa fa-search fa-lg"></i>查 询</button>
                                <button class="add btn btn-default"><span class="add"></span>增 加</button>
                                <button class="delete btn btn-default"><span class="delete"></span>删 除</button>
                            </div>
                        </div>
                    </div>
                </div>
                <table id="serviceTable" class="myTable"></table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">服务项目信息</h4>
                </div>
                <div class="modal-body">
                    <div class="panel panel-info">
                        <div class="panel-body">
                            <form id="editForm" role="form" action="">
                                <input name="Id" class="Id" type="hidden" />
                                <input class="cls-form-reset" type="reset" style="display:none;" />
                                <div class="form-group">
                                    <label><font color="red">*</font> 服务项目：</label>
                                    <input name="Name" type="text" class="Name form-control" />
                                </div>
                                <div class="form-group">
                                    <label><font color="red">*</font> 服务类别：</label>
                                    <select class="Type form-control valid" name="Type" aria-required="true" aria-invalid="false"></select>
                                </div>
                                <div class="form-group">
                                    <label><font color="red">*</font> 单位：</label>
                                    <input name="Unit" type="text" class="Unit form-control" />
                                </div>
                                <div class="form-group">
                                    <label><font color="red">*</font> 单价：</label>
                                    <input name="Price" class="Price form-control" type="number" min="1" max="200000000" />
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="cancel btn btn-danger" data-dismiss="modal">取 消</button>
                    <button type="button" class="save btn btn-success">保 存</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        initTable();

        function initSelect() {
            if (window._util.ItemCode.ServiceType != null) {
                var htmlStr = "";
                $.each(window._util.ItemCode.ServiceType, function (ix, item) {
                    htmlStr += '<option value="' + item.Value + '">' + item.Text + '</option>';
                });

                $("#editForm .Type").html(htmlStr);
                htmlStr = '<option value="">所有</option>' + htmlStr;
                $("#toolbar .query-type").html(htmlStr);
            }
        }
        function initTable() {
            initSelect();
            $('#serviceTable').bootstrapTable({
                url: window._util.BASE_URL + '/Maintain/QueryService',
                method: 'get',
                dataType: "json",
                cache: true,
                totalField: 'MaxRows',
                dataField: 'Items',
                toolbar: '#toolbar',                //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                singleSelect: true,
                pagination: true, //分页
                pageNumber: 1,                       //初始化加载第一页，默认第一页
                pageSize: 20,                       //每页的记录行数（*）
                pageList: [20, 50, 100, 200, 500],        //可供选择的每页的行数（*）
                search: false, //显示搜索框
                sidePagination: "server", //服务端处理分页
                clickToSelect: true,                //是否启用点击选中行
                showRefresh: false,                  //是否显示刷新按钮
                queryParams: function (params) {
                    params["Name"] = $("#toolbar .query-name").val();
                    params["Type"] = $("#toolbar .query-type").val();
                    return params;
                },
                columns: [
                    {
                        checkbox: true,
                    },
                     {
                         field: 'Id',
                         title: '序号',
                         align: 'center',
                         hlign: 'center'
                     },
                    {
                        field: 'Name',
                        title: '服务项目',
                        align: 'center',
                        hlign: 'center'
                    },
                      {
                          field: 'Type',
                          title: '服务类别',
                          align: 'center',
                          hlign: 'center'
                      },
                     {
                         field: 'Unit',
                         title: '单位',
                         align: 'center',
                         hlign: 'center'
                     },
                    {
                        field: 'Price',
                        title: '单价',
                        align: 'center',
                        hlign: 'center'
                    },
                    {
                        title: '操作',
                        align: 'center',
                        hlign: 'center',
                        formatter: function (value, row, index) {
                            return '<button data-id="' + row.Id + '" class="edit btn btn-success"><i class="fa fa-edit fa-lg"></i> 编 辑</button>';
                        }
                    }
                ]
            });
        }

        //查询
        $("#toolbar .query").click(function () {
            $('#serviceTable').bootstrapTable('refresh');
        });
        //添加
        $("#toolbar button.add").click(function (args) {
            //表单重置
            $('#editForm input.cls-form-reset').click();
            $("#editForm input.Id").val(0);
            $("#editModal").modal({
                keyboard: true,
                show: true
            });
        });
        //编辑
        $("#serviceTable tbody").click(function (event) {
            var element = $(event.target);
            if (element.is("button.edit")) {
                var id = element.data("id");
                $.ajax({
                    url: window._util.BASE_URL + "/Maintain/GetService",
                    method: "GET",
                    dataType: "json",
                    data: "Id=" + id,
                    success: function (resp) {
                        if (resp != null) {
                            $("#editForm input.Id").val(resp.Id);
                            $("#editForm input.Name").val(resp.Name);
                            $("#editForm select.Type").val(resp.Type);
                            $("#editForm input.Unit").val(resp.Unit);
                            $("#editForm input.Price").val(resp.Price);

                            $("#editModal").modal({
                                keyboard: true,
                                show: true
                            });
                        } else {
                            alert("获取数据出错");
                        }
                    }
                }).fail(function (H, G) {
                    alert("浏览器超时未响应，请刷新重试");
                });
            }
        });

        //删除
        $("#toolbar button.delete").click(function () {
            var selections = $('#serviceTable').bootstrapTable('getSelections');
            if (selections != null && selections.length > 0) {
                var idArray = new Array();
                $.each(selections, function (ix, item) {
                    idArray.push(item.Id);
                });
                var jsonData = {
                    ids: idArray
                };
                $.ajax({
                    url: window._util.BASE_URL + "/Maintain/DeleteServices",
                    method: "POST",
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    data: JSON.stringify(jsonData),
                    success: function (resp) {
                        if (resp != null && resp.Result) {
                            alert("删除成功");
                            $('#serviceTable').bootstrapTable('refresh');
                        } else {
                            alert("删除失败");
                        }
                    }
                }).fail(function (G, F) {
                    alert("浏览器超时未响应，请刷新重试");
                });
            }

        });
        //保存
        $("#editModal button.save").click(function () {
            $('#editForm').submit();
        });
        //表单编辑校验
        var validate = $("#editForm").validate({
            debug: false,
            focusInvalid: false,
            onkeyup: false,
            submitHandler: function (form) {
                var jsonData = $(form).serializeObject();
                $.ajax({
                    url: window._util.BASE_URL + "/Maintain/EditService",
                    method: "POST",
                    contentType: "application/json;charset=UTF-8",
                    async: true,
                    dataType: "json",
                    data: JSON.stringify(jsonData),
                    success: function (resp) {
                        if (resp != null && resp.Result) {
                            alert(resp.Message);
                            $('#serviceTable').bootstrapTable('refresh');
                            $("#editModal").modal('hide');
                        } else {
                            alert("保存失败");
                        }
                    }
                }).fail(function (G, F) {
                    alert("浏览器超时未响应，请刷新重试");
                });
                return false;
            },

            rules: {
                Name: {
                    required: true
                },
                Type: {
                    required: true
                },
                Unit: {
                    required: true
                },
                Price: {
                    required: true,
                    range: [0, 2000000000]
                }
            },
            messages: {
                Name: {
                    required: "服务项目不能为空"
                },
                Type: {
                    required: "服务类别不能为空"
                },
                Unit: {
                    required: "单位不能为空"
                },
                Price: {
                    required: "单价不能为空",
                    range: "请输入{0}-{1}之间的数字"
                }
            }

        });
    });

</script>